<template>
  <div class="box detailBox" @scroll="scroll" ref="box">
    <div class="big">
      <van-nav-bar class="nav1">
        <template #left>
          <van-icon name="arrow-left" size="20" @click="back()"/>
        </template>
        <template #right>
          <van-icon name="share-o" size="20" @click="showShare = true"/>
        </template>
      </van-nav-bar>
      <van-nav-bar class="nav2">
        <template #left>
          <van-icon name="arrow-left" size="20" @click="back()"/>
        </template>
        <template #right>
          <van-icon name="share-o" size="20" @click="showShare = true"/>
        </template>
      </van-nav-bar>
      <van-swipe class="my-swipe" indicator-color="white" :initial-swipe="index" @change="onChange" ref="mySwipe">
        <van-swipe-item v-for="val in images" :key="val" @click="imgBig">
          <van-image
            width="100vw"
            height="3rem"
            fit="contain"
            :src="val"
          />
        </van-swipe-item>
      </van-swipe>
      <div>
        <div class="price">
          <h3 style="color: hotpink;font-size: 0.15rem;">￥<span style="font-size: 0.3rem;">{{proList.lastPri}}</span></h3>
          <p>月销量 &nbsp; <i>{{proList.sales}}</i></p>
        </div>
        <h2> <button class="goodsName">新品</button>{{proList.proname}}</h2>
        <h5>{{proList.desc}}</h5>
      </div>
      <div class="hot">
        <span>榜单</span>
        <div>入选[休闲食品] 热销榜第<span style="color: hotpink;">2</span>名</div>
      </div>
      <div class="hot">
        <span>配送</span>
        <div>最快今天送达</div>
      </div>
      <div>
        <h2>{{proList.desc}}</h2>
        <img :src="proList.img">
        <img :src="proList.img">
        <img :src="proList.img">
        <img :src="proList.img">
      </div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="shop-o" text="购物车" @click="goCard"/>
        <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" @click="addCart"/>
      </van-goods-action>
      <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { getDetail, addCart } from '@/api/request.js'
import { NavBar, Icon, Swipe, SwipeItem, Lazyload, CouponCell, CouponList, GoodsAction, GoodsActionIcon, GoodsActionButton, Toast, ShareSheet, ImagePreview } from 'vant'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(CouponCell)
Vue.use(CouponList)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(Toast)
Vue.use(ShareSheet)
Vue.use(ImagePreview)
export default {
  data () {
    return {
      index: 0,
      images: [
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3839985064,2475402152&fm=26&gp=0.jpg',
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1727087792,3292372211&fm=26&gp=0.jpg',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F81e9bb8b535404bec92ceae4ba369bbc0e18111a.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618660166&t=4e9ee6f6a20ad8b89ce8fc98484b2de5'
      ],
      chosenCoupon: -1,
      proList: [],
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ]
    }
  },
  methods: {
    onChange (index) {
      this.index = index
    },
    imgBig () {
      const that = this
      ImagePreview({
        images: this.images,
        startPosition: this.index,
        onChange (i) {
          that.$refs.mySwipe.swipeTo(i)
        }
      })
    },
    scroll () {
      document.querySelector('.nav2').style.opacity = this.$refs.box.scrollTop / 100
    },
    onExchange (code) {
    },
    back () {
      this.$router.back()
    },
    addCart () {
      addCart({
        userId: sessionStorage.getItem('userId'),
        proId: this.$route.params.id,
        num: 1
      }).then(data => {
        if (data.data.code !== 202 && sessionStorage.getItem('isLogin') === 'ok') {
          Toast('添加购物车成功')
        } else {
          Toast('添加购物车失败')
        }
      })
    },
    goCard () {
      this.$router.push('/cart')
    }
  },
  mounted () {
    getDetail({
      id: this.$route.params.id
    }).then(data => {
      this.images.unshift(data.data.msg.img)
      this.proList = data.data.msg
    })
  }
}
</script>
<style lang="scss">
.detailBox{
  height: 100%;
  .goodsName{
    background: red;
    color: white;
    font-size: 0.14rem;
    border: none;
    border-radius: 0.2rem;
  }
}
.nav2{
    position: fixed;
    opacity: 0;
    width: 100vw;
    top: 0;
  }
.nav1{
  position: fixed;
  width: 100vw;
  background: none;
  z-index: 10;

  &::after{
    border-bottom: none;
  }
}
.my-swipe{
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  height: 3rem;
}
.price{
  padding: 0.2rem 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hot{
  width: 100vw;
  padding: 0.1rem 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-top: 0.08rem solid #eee;
  border-bottom: 0.08rem solid #eee;
  div{
    margin-right: 1rem;
  }
}
</style>
